<html>


	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<link rel="stylesheet" type="text/css" href="css/api.css"/>
		<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css"/>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}		
			html,body{
				height:100%;
			}
			#container{
				height:100%;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				text-align: center;
			}
			#header{
				width:100%;
				height:40px;
				line-height:40px;
				font-size:17px;
				background-color: #3C852C;
			}
			
			/*标题导航栏*/
			.anli{text-align:center;display:inline-block;width:100%;height:40px;line-height:36px;font-size:16px;display:none;}
			.zixun{text-align:center;display:inline-block;width:100%;height:40px;line-height:36px;font-size:16px;display:none;}
			.hezuo{text-align:center;display:inline-block;width:100%;height:40px;line-height:36px;font-size:16px;display:none;}	
			.tuijian{text-align:center;display:inline-block;width:100%;height:40px;line-height:36px;font-size:16px;display:none;}	
			/*活跃导航栏*/
			.active{display:block;}
			
			/*底部导航栏基本样式*/
			#anli{background-color:snow;font-size:18px;color:black;}
			#zixun{background-color:snow;font-size:18px;color:black;}
			#hezuo{background-color:snow;font-size:18px;color:black;}
			#tuijian{background-color:snow;font-size:18px;color:black;}
			/*底部导航栏被选中样式*/
			.activebtn{
				background-color: #3C852C;
			}
				
			#main{
				-webkit-box-flex:1;
				width:100%;
			}
			#footer{
				height:50px;
				line-height:10px;
				width:100%;
			}
			#footer ul{
				display:-webkit-box;
				line-height:50px;
			}
			#footer ul li{
				-webkit-box-flex: 1;
				height:50px;
				text-align:center;
				background-color:snow;
			}
			.titlebar{
			
			}
		</style>
	</head>

	<body>
			
		<div id="container">
			
			<div id="header">
				<div class="titlebar anli active">案例</div>
				<div class="titlebar zixun">资讯</div>
				<div class="titlebar hezuo">品牌合作商</div>
				<div class="titlebar tuijian">推荐</div>
			</div>
			<div id="main">
			
			</div>
			<div id="footer">
				<ul>
					<li id="anli" class="activebtn" onclick="randomSwitchBtn(this,'anli',0)">案例</li>
					<li id="zixun" class="" onclick="randomSwitchBtn(this,'zixun',1)">资讯</li>
					<li id="hezuo" class="" onclick="randomSwitchBtn(this,'hezuo',2)">品牌合作商</li>
					<li id="tuijian" class="" onclick="randomSwitchBtn(this,'tuijian',3)">推荐</li>
				</ul>
			</div>			
		</div>
			
	</body>
	
	<script type="text/javascript" src="script/api.js"></script>
	<script type="text/javascript">
	
		apiready = function(){
			
			var header = $api.byId('header');
        	$api.fixIos7Bar(header);
			
			var main = $api.byId("main");
			var frame_h = $api.offset(main).h;
			api.openFrameGroup({
	            name: 'group',
	            scrollEnabled: false,
	            rect:{x:0,y:40,w:'auto',h:frame_h},
	            index:0,
	            frames:[
	            	{name:'frame1',url:'html/frame1.html',bounces:true},
	            	{name:'frame2',url:'html/frame2.html',bounces:true},
	            	{name:'frame3',url:'html/frame3.html',bounces:true},
	            	{name:'frame4',url:'html/frame4.html',bounces:true}
	            ]
	        },function(ret,err){
	        });
	        
	  }
	  
	  	function showFrame(index){
	  		api.setFrameGroupIndex({
	              name: 'group',
	              index: index,
	              scroll: false
              });
	  	}
		
		// 随意切换按钮
	    function randomSwitchBtn(obj, name, index) {
	    	
	    	var $footer = $api.byId('footer');
	        var $footerBar = $api.domAll($footer, 'li');
	        for (var j = 0; j < $footerBar.length; j++) {
	            $api.removeCls($footerBar[j], 'activebtn');
	        }
	        $api.addCls(obj, 'activebtn');
	        
	        for(var k=0; k<$footerBar.length; k++){
	        	if(k !== index){
	        		api.closeFrame({
	                    name: 'frame' + k
                    });
	        	}else{
	        		showFrame(k);
	        	}
	        }
	        
	        showFrame(index);
	    	
	        var $header = $api.byId('header');
	        var $titleBar = $api.domAll($header, '.titlebar');
	        for (var i = 0; i < $titleBar.length; i++) {
	            $api.removeCls($titleBar[i], 'active');
	        }
	        $api.addCls($titleBar[index], 'active');
	
	    }

		
	</script>
</html>